<template>
	<view class="quan">
		<!-- 费率 -->
		<view class="top">
			<view class="top1">兑换手续费为兑换数量的{{num}}%</view>
			<view class="top1">当前易宝价格：￥{{price}}</view>
		</view>
		<!-- 变现金额 -->
		<form @submit="formSubmit" >
		<view class="cash_in">
				<view class="title">兑换数量</view>
				<view class="input_num"><input class="num" name="num" placeholder="请输入兑换数量" /></view>
				<view class="balance">积分数量{{phone.give}}</view>
			</view>
		<!-- 验证码 -->
			<view class="cash_in_yzm"><view class="yzm_text">验证码</view><input  class="yzm" type="text" name="yzm" maxlength="4" placeholder="手机验证码" />
			<view v-if="show_yzm">
				<view class="yzm_btn" @tap="yzm">获取验证码</view>
			</view>
			<view v-else>
				<view class="yzm_btn2">剩余{{seconde}}s</view>
			</view>
			</view>
			<!-- 变现按钮 -->
			<view class="btn"><button type="primary" form-type="submit">确认兑换</button></view>
			</form>
			<view class="rule">积分数量必须大于100元，且为100整数倍</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price:1.0,
				num:10.0,
				look: true,
				show_yzm:true,
				seconde:'60',
				phone:'',
				yhxx:'',
			}
		},
		onLoad() {
			uni.request({
				url:'http://tuiguang.yiyunoto.com/api/member/givepasscard',
				header:{authtoken:this.$store.state.token},
				success:(res)=>{
					console.log("请求成功",res)
					this.phone=res.data.data
				},
				fail:(res)=>{
					console.log("请求失败",res)
				}
			})
		},
		methods: {
			yzm:function(){
				console.log("获取验证码",this.phone.phone,)
					const requestTask =uni.request({
							url: 'http://tuiguang.yiyunoto.com/api/login/smsSend',
							header:{authtoken:this.$store.state.token},
							method:'POST',
							// headers:{'Content-Type':'application/json'},
							data:{
								phone:this.phone.phone,
							},
								success: (res) => {
									this.$api.msg(res.data.msg);
									if(res.data.msg=="短信验证码发送成功"){
									this.show_yzm=false,
									setInterval(()=>{
										--this.seconde
									},1000)
									setTimeout(()=>{
										this.show_yzm=true,
										this.seconde=60},
										60000
									)}
							console.log("ya",res.data.msg)							// console.log(res.data.data);
							}
						});
				},
				formSubmit: function(e) {
					console.log(e.detail.value);
					this.yhxx = e.detail.value;
					var content = this.yhxx;
					console.log('5',content.num);
					console.log(content.yzm);
					uni.request({
						url: 'http://tuiguang.yiyunoto.com/api/member/givepasscard',
						header: { authtoken: this.$store.state.token },
						method: 'POST',
						data: {
							passcard: content.num,
							code:content.yzm,
						},
						success: res => {
							console.log('提现成功', res);
							this.$api.msg(res.data.msg);
							if (res.data.msg == '提现成功') {
								uni.navigateTo({
									url: '../index/index'
								});
							}
							console.log(res.data.data);
						},
						fail: res => {
							console.log('登录失败', res);
							this.$api.msg(res.data.msg);
						}
					});
				}
		
		}
	}
</script>

<style>
	.quan{
		width: 100%;
		height: 100vh;
		background: #F7F7F7;
	}
	.top{
		width: 100%;
		height:130upx;
		text-align: center;
		background:#FDEFD4 ;
		color: #5F321F;
		font-size: 28upx;
		padding-top: 20upx;
		box-sizing: border-box;
	}
	.top1{
		width: 100%;
		padding-bottom: 12upx;
		text-align: center;
	}
	
	.cash_in{
		width: 100%;
		background: #FFFFFF;
	}
	.title{
		width: 100%;
		height:50upx;
		padding:23upx 30upx ;
		box-sizing: border-box;
	}
	.input_num{
		width: 90%;
		height:90upx;
		border-bottom: #E6E6E6 1upx solid;
		margin-left:30upx;
		margin-top: 20upx;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}
	.input_left{
		width: 10%;
		height: 100%;
		padding-top:30upx;
		float: left;
		box-sizing: border-box;
	}
	.num{
		width:70%;
		height: 100%;
		padding-top:20upx;
		float: left;
	}
	.balance{
		width: 100%;
		padding-top:20upx;
		padding-left: 30upx;
		color:#B7B7B7;
		font-size: 26upx;
		padding-bottom: 50upx;
	}
.cash_in_yzm{
		width: 100%;
		height: 100upx;
		padding: 30upx 30upx;
		margin-top:18upx ;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.yzm_text{
		width:25%;
		float: left;
		
	}
	.yzm {
		width:50%;
		float: left;
	}

	.yzm_btn {
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: blue;

	}
	.yzm_btn2{
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: #DBDADA;
	}
	.btn {
		width: 90%;
		margin: 80upx auto 30upx;
	}
	.rule{
		width:100%;
		text-align: center;
		font-size:28upx ;
		color:#929292;
	}
</style>
